import React, {Component} from 'react';
import {TabBar} from 'antd-mobile';
import PropTypes from 'prop-types';
import {withRouter} from 'react-router-dom';

const Item = TabBar.Item;

//希望在非路由组件中使用路由库的api
//withRouter()
class NavFooter extends Component {
    static propTypes = {
        navList: PropTypes.array.isRequired,
        unReadCount: PropTypes.number.isRequired
    }

    render() {
        const pathName = this.props.location.pathname;
        let {navList, unReadCount} = this.props;
        //过滤掉hide为true的nav
        navList = navList.filter(nav => !nav.hide);
        return (
            <TabBar>
                {
                    navList.map((nav) => (
                        <Item key={nav.path}
                              badge={nav.path == '/message' ? unReadCount : 0}
                              title={nav.title}
                              icon={{uri: require(`./images/${nav.icon}.png`)}}
                              selectedIcon={{uri: require(`./images/${nav.icon}-selected.png`)}}
                              selected={pathName == nav.path}
                              onPress={() => this.props.history.replace(nav.path)}
                        />
                    ))
                }
            </TabBar>
        )
    }
}

//向外暴露withRouter()包装产生的组件
//内部会向组件中传入一些路由组件特有的属性：history,location,math
export default withRouter(NavFooter);